<template>
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="130px">
      <div>
        <span style="font-size:24px; margin-left: 18px">订单信息:</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="5">
          <el-form-item label="买家名称:">
            <span>{{dataForm.trueName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="买家账号:">
            <span>{{dataForm.userName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="订单编号:">
            <span>{{dataForm.orderId}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="支付总积分:">
            <span>{{dataForm.totalIntegral}}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="5">
          <el-form-item label="赠送总积分:">
            <span>{{dataForm.getIntegral}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="订单支付积分:">
            <span>{{dataForm.consumeIntegral}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="订单总价:">
            <span>{{dataForm.total}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="买家类型:">
            <span v-if="this.dataForm.userType == 1">运营商</span>
            <span v-if="this.dataForm.userType == 2">普通联盟店</span>
            <span v-if="this.dataForm.userType == 3">消费者</span>
            <span v-if="this.dataForm.userType == 4">VIP会员</span>
            <span v-if="this.dataForm.userType == 5">中级版联盟店</span>
            <span v-if="this.dataForm.userType == 6">高级版联盟店</span>
            <span v-if="this.dataForm.userType == 7">城市合伙人</span>
            <span v-if="this.dataForm.userType == 8">城市合伙人联盟店</span>
            <!-- <el-select v-model="dataForm.userType" placeholder="买家类型">
              <el-option
              v-for="item in dataForm.userTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              disabled="true">
              </el-option>
            </el-select> -->
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="5">
          <el-form-item label="买家备注:">
            <span>{{dataForm.msg}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="收货人:">
            <span>{{dataForm.person}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="手机号:">
            <span>{{dataForm.phone}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="详细地址:">
            <span>{{dataForm.address}}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="5">
          <el-form-item label="发货时间:">
            <span>{{dataForm.shipTime}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="用户确认收货时间:">
            <span>{{dataForm.returnShipTime}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="支付时间:">
            <span>{{dataForm.payTime}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="支付流水号:">
            <span>{{dataForm.outOrderId}}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="5">
          <el-form-item label="快递公司:">
            <span>{{dataForm.companyName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="物流编号:">
            <span>{{dataForm.shipCode}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="订单状态:">
            <span v-if="this.dataForm.orderStatus == 0">已取消</span>
            <span v-if="this.dataForm.orderStatus == 10">未支付</span>
            <span v-if="this.dataForm.orderStatus == 20">待发货</span>
            <span v-if="this.dataForm.orderStatus == 30">已发货</span>
            <span v-if="this.dataForm.orderStatus == 40">已收货</span>
            <span v-if="this.dataForm.orderStatus == 50">已完成</span>
            <span v-if="this.dataForm.orderStatus == 100">已删除</span>
            <!-- <el-select v-model="dataForm.orderStatus" placeholder="订单状态">
              <el-option
              v-for="item in dataForm.orderStatusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              disabled="true">
              </el-option>
            </el-select> -->
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="支付方式:">
            <span>{{dataForm.payName}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5">
          <el-form-item label="支付编号:">
            <span>{{dataForm.invoice}}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <span style="font-size:24px">商品信息:</span>
      <el-table v-if="this.dataForm.list.length !== 0"
                :data="this.dataForm.list"
                border
                style="width: 100%">
        <el-table-column
          prop="img"
          label="商品图">
          <template slot-scope="scope">
            <el-popover
              placement="right"
              trigger="hover">
              <img :src="'https://image.yilianbaihui.cn/consumer/' + scope.row.img" style="max-height: 100px;"/>
              <img slot="reference" :src="'https://image.yilianbaihui.cn/consumer/' + scope.row.img" style="max-height: 50px;max-width: 130px">
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          prop="goodsName"
          label="商品名">
          <template slot-scope="scope">
            <a :href="'http://www.yilianbaihui.cn/item_show.html?goodsId=' + scope.row.goodsId">{{scope.row.goodsName}}</a>
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="address"
          label="价格类型">
          <template slot-scope="scope">
            {{scope.row.address === 1 ?'兑换商城':'福利商城'}}
          </template>
        </el-table-column> -->
        <el-table-column
          prop="goodsSerial"
          label="型号">
        </el-table-column>
        <el-table-column
          prop="specInfo"
          label="规格">
        </el-table-column>
        <el-table-column
          prop="count"
          label="数量">
        </el-table-column>
        <el-table-column
          prop="shipPrice"
          label="价格">
          <template slot-scope="scope">
            <span v-if="dataForm.priceType === 1">{{scope.row.shipPrice}}(运费)+{{scope.row.integral}}(积分)</span>
            <span v-if="dataForm.priceType === 2">{{scope.row.shipPrice}}(运费)+{{scope.row.price}}(售价)</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="logisticsCompany"
          label="快递公司">
        </el-table-column>
        <el-table-column
          prop="deliveryNo"
          label="快递单号">
        </el-table-column>
        <!--<el-table-column
          header-align="center"
          align="center"
          label="物流">
          <template slot-scope="scope">
            <el-button type="primary" @click="queryExpress(scope.row.deliveryNo)">物流</el-button>
          </template>
        </el-table-column>-->
      </el-table>
      <br/>
      <span style="font-size:24px">订单状态:</span>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-table :data="dataForm.expressList">
            <el-table-column label="时间">
              <template slot-scope="scope">
                <span>{{scope.row.acceptTime}}</span>
              </template>
            </el-table-column>
            <el-table-column label="物流记录">
              <template slot-scope="scope">
                <span>{{scope.row.acceptStation}}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="10">
          <el-form-item label="售后状态">
            <ul v-if="this.dataForm.returnStatus != null || this.dataForm.returnType != null">
              <li>申请退货时间：{{this.dataForm.applyReturnTime}}</li>
              <li>申请退货状态：{{this.dataForm.returnStatus === 1 ? '已申请' : (this.dataForm.returnStatus === 2 ? '审核通过' : (this.dataForm.returnStatus === 3 ? '退货中/退款中/换货中' : (this.dataForm.returnStatus === 4 ? '退货成功' : (this.dataForm.returnStatus === 5 ? '审核未通过' : (this.dataForm.returnStatus === 6 ? '退货失败' : (this.dataForm.returnStatus === 7 ? '已撤销' : ''))))))}}</li>
              <li>申请退货类型：{{this.dataForm.returnType === 1 ? '仅退款' : (this.dataForm.returnType === 2 ? '退货并退款' : (this.dataForm.returnType === 3 ? '换货' : ''))}}</li>
            </ul>
            <span v-if="this.dataForm.returnStatus == null && this.dataForm.returnType == null"><br/>暂无申请售后信息</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        dataForm: {
          id: 0,
          trueName: '',
          userName: '',
          orderId: '',
          totalIntegral: '',
          totalprice: '',
          userType: '',
          msg: '',
          person: '',
          phone: '',
          address: '',
          payTime: '',
          outOrderId: '',
          companyName: '',
          shipCode: '',
          orderStatus: '',
          payName: '',
          total: '',
          consumeIntegral: '',
          getIntegral: '',
          shipTime: '',
          returnShipTime: '',
          applyReturnTime: '',
          list: [],
          returnType: '',
          returnStatus: '',
          invoice: '',
          priceType: '',
          userTypeOptions: [{
            value: 0,
            label: '未知'
          }, {
            value: 1,
            label: '区域运营商'
          }, {
            value: 2,
            label: '普通联盟店'
          }, {
            value: 3,
            label: '消费者'
          }, {
            value: 4,
            label: 'VIP会员'
          }, {
            value: 5,
            label: '中级版联盟店'
          }, {
            value: 6,
            label: '高级版联盟店'
          }, {
            value: 7,
            label: '城市合伙人'
          }, {
            value: 8,
            label: '城市合伙人联盟店'
          }],
          orderStatusOptions: [{
            value: 0,
            label: '已取消订单'
          }, {
            value: 10,
            label: '未支付'
          }, {
            value: 20,
            label: '已支付'
          }, {
            value: 30,
            label: '已发货'
          }, {
            value: 40,
            label: '已收货'
          }, {
            value: 50,
            label: '已完成'
          }]
        },
        dataRule: {}
      }
    },
    activated () {
      debugger
      if (this.$route.query.orderId != null) {
        this.init(this.$route.query.orderId)
      }
      /* this.init('20191207100614018') */
    },
    methods: {
      init (orderId) {
        this.visible = true
        if (orderId != null) {
          this.dataForm.orderId = orderId
        }
        this.dataForm.priceType = 0
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.orderId) {
            debugger
            this.$http({
              url: this.$http.adornUrl(`/shopping/order/getOrderById/${this.dataForm.orderId}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.trueName = data.data.trueName
                this.dataForm.userName = data.data.userName
                this.dataForm.orderId = data.data.orderId
                if (data.data.priceType === 1) {
                  this.dataForm.totalIntegral = data.data.totalIntegral
                } else if (data.data.priceType === 2) {
                  this.dataForm.totalIntegral = 0
                }
                this.dataForm.totalprice = data.data.totalprice
                debugger
                if (data.data.priceType === 1) {
                  this.dataForm.total = data.data.totalIntegral + '(积分)+' + data.data.totalPrice + '(现金)'
                } else if (data.data.priceType === 2) {
                  this.dataForm.total = data.data.totalPrice + '(现金)'
                }
                this.dataForm.userType = data.data.userType
                this.dataForm.msg = data.data.msg
                this.dataForm.person = data.data.person
                this.dataForm.phone = data.data.phone
                this.dataForm.address = data.data.address
                this.dataForm.payTime = data.data.payTime
                this.dataForm.outOrderId = data.data.outOrderId
                this.dataForm.companyName = data.data.companyName
                this.dataForm.shipCode = data.data.shipCode
                this.dataForm.orderStatus = data.data.orderStatus
                this.dataForm.payName = data.data.payName
                this.dataForm.consumeIntegral = data.data.consumeIntegral
                if (data.data.priceType === 1) {
                  this.dataForm.getIntegral = 0
                } else if (data.data.priceType === 2) {
                  this.dataForm.getIntegral = data.data.totalIntegral
                }
                // this.dataForm.getIntegral = data.data.getIntegral
                this.dataForm.shipTime = data.data.shipTime
                this.dataForm.returnShipTime = data.data.returnShipTime
                this.dataForm.returnStatus = data.data.returnStatus
                this.dataForm.returnType = data.data.returnType
                this.dataForm.applyReturnTime = data.data.applyReturnTime
                this.dataForm.list = data.data.list
                this.dataForm.invoice = data.data.invoice
                this.dataForm.priceType = data.data.priceType
              }
            })
            this.$http({
              url: this.$http.adornUrl(`/shopping/order/getLogisticsInformationByExpressNo/${this.dataForm.shipCode}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.expressList = data.data
              }
            })
          }
        })
      }
      /* queryExpress (expressNo) {
        this.$http({
          url: this.$http.adornUrl(`/shopping/order/getLogisticsInformationByExpressNo/${expressNo}`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataForm.expressList = data.data
          }
        })
      } */
    }
  }
</script>
